<template>
    <div class="person">
        <h2>watch监控数据的情况五</h2>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <h2>汽车：
            第一辆车{{ person.car.c1 }}
            第二辆车{{ person.car.c2 }}
        </h2>
        <button @click="changeName()">修改姓名</button>
        <button @click="changeAge()">修改年龄</button>
        <button @click="changePerson()">修改人物信息</button>
        <button @click="changec1()">修改第一辆汽车</button>
        <button @click="changec2()">修改第二辆汽车</button>
        <button @click="changeCar()">修改整个汽车</button>
    </div>

</template>

<script setup lang="ts" name="Person">
import { ref,watch,reactive } from 'vue';
    let person=reactive({
        "name":"zhangsan",
        "age":22,
        "car":{
            c1:"宝马",
            c2:"奔驰"

        }

    })
    function changeName(){
        person.name+="~"
    }
    function changeAge(){
        person.age+=1
    }
    function changePerson(){
        person=Object.assign(person,{"name":"tom","age":66})
    }
    function changec1(){
        person.car.c1="帕拉梅拉"
    }
    function changec2(){
        person.car.c2="库里南"
    }
    function changeCar(){
        person.car={c1:"帕萨特",c2:"途观"}
    }
     /* 
    监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
    watch的第一个参数是：被监视的数据
    watch的第二个参数是：监视的回调
    watch的第三个参数是：配置对象（deep、immediate等等.....） 
  */
    // watch(person,(newSum,oldSum)=>{
    //     console.log("person发生了变化",newSum,oldSum)       
    // })
    // 需要监控对象中的属性的变化，则需要一函数（ 返回值）的方式进行监控数据
    watch(()=>person.name,(value)=>{
        console.log("person发生了变化",value)       
    })
    // 若需要监控地址类型数据的内部信息发生的变化，需要开启深度监控
    watch(()=>person.car,(value)=>{
        console.log("person发生了变化",value)       
    },{deep:true})

</script>
<style>
.person{
    background-color: lightseagreen;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;

}
</style>